import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 路由的使用
// 1、下载 npm i vue-router@3
// 2、引入路由对象
import VueRouter from "vue-router"
// 3、注册全局组件
Vue.use(VueRouter)
// 4、创建路由规则（路径和组件映射关系）
const routes = [
  {
    path: "/",   // 匹配默认的网页路径
    redirect: "/find" // 重定向 到发现音乐页面
  },
  {
    path: "/find",
    // 表示注册/find路径对应的组件
    // 这种通过函数引入组件的方法叫“按需引入”
    component: ()=>{
      return import("@/views/find.vue")
    },
    name: "find"  // 路由名
  },
  {
    // path: "/my/:musicAge", // 像这种有参数的路由，我们叫他“动态路由”
    // 参数后面的问号表示，该参数可传可不传
    path: "/my/:musicAge?", 
    component: ()=>import("@/views/my.vue"),
    name: "my"
  }
  ,{
    path: "/friend",
    component: ()=>import("@/views/friend.vue"),
    name: "friend"
  },
  { // 配置404页面，当用户访问的路由路径不存在的时候 展示的页面
    path: "*", // *表示匹配任意路由路径
    component: ()=>import("@/views/404.vue")
  }
]

// 5、根据路由规则生成路由对象
const router = new VueRouter({
  // routes: routes
  routes,      // 简写
  /**
   * 
   * 设置路由模式：有2中路由模式
   * hash模式：浏览器地址栏目有#，通过锚点实现路由跳转
   * history模式：浏览器地址栏目上没有#，是通过history对象的相关方法实现
   * 
   */ 
  mode: "history"
})

// 6、把路由对象注入到vue实例中
new Vue({
  // router: router,
  router,  // 简写
  render: h => h(App),
}).$mount('#app')
